
<style scoped>
*{

}
</style>
<template >
<div style="margin-top: 3%;background: #F1FAEE">
  <el-form :model="form" label-width="auto" >
    <el-form-item label=" 请输入您的年龄?">
      <el-input v-model="form.age" />
    </el-form-item>
    <el-form :model="form" label-width="auto" style="width: 100%;">
      <el-form-item label=" 请输入您所在的地区?">
        <el-input  v-model="form.site" />
      </el-form-item>
    </el-form>
    <el-form-item label="请详细描述您的症状">
      <el-input v-model="form.problem" type="textarea" maxlength="111" rows="5" show-word-limit="true" placeholder="请您详细描述您的症状：您是否感到焦虑or抑郁 或者您遇到了什么困扰您的事情,请大胆讲出来,Ai问答保护您的隐私" />
    </el-form-item>
    <el-form-item label="您这样的症状持续多久了?">
      <el-select v-model="form.state" placeholder="请选择您的目前状态">
        <el-option label="持续几天了" value="症状持续了几天了" />
        <el-option label="持续一周以上" value="症状持续了一周以上" />
        <el-option label="持续大约一个月" value="症状持续了大约一个月" />
        <el-option label="持续几个月了" value="症状持续了几个月了" />
        <el-option label="持续一年或者更久" value="症状持续了多年" />
      </el-select>
    </el-form-item>

    <el-form-item label="选择您的性别">
      <el-radio-group v-model="form.gander">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="success" style="width: 100%" :disabled="op" @click="onSubmit">咨询</el-button>
    </el-form-item>
    <el-drawer style="background: url('https://img2.imgtp.com/2024/05/18/4MJrDjIi.jpg') no-repeat; background-size: cover" v-model="table" title="AI心理建议仅供参考 具体请咨询线下医生" direction="ttb" size="90%">
<el-row>
  <el-col :span="12">

      <el-card v-model="heart" style="   background-color:transparent;" >
        <el-text type="success" size="default" style="letter-spacing: 2px">{{heart.advice}}</el-text>
      </el-card>


  </el-col>
  <el-col :span="12">

    <el-card v-model="heart" style="   background-color:transparent;">
      <el-icon>
        <img  style="height: 9%;width: auto" src="https://img2.imgtp.com/2024/05/17/IqoqzFxf.png">
      </el-icon>
      <el-text type="danger" size="large">{{heart.help}}</el-text>
    </el-card>

  </el-col>
</el-row>

    </el-drawer>
  </el-form>

</div>

</template>

<script lang="ts" setup>
import {reactive,ref} from 'vue'
import axios from "axios";
import {Action, ElMessage, ElMessageBox} from "element-plus";

// do not use same name with ref
const form = ref({
age:'',
  problem:"",
  state:'',
  gander:"",
site:"北京"
})
const heart=ref({
  advice:'',
  help:''
})
const table =ref(false)
const op=ref(false);
const onSubmit = () => {
  op.value=true;
axios.post("/heart/cute",form.value).then(result=>{
  op.value=false;
  heart.value.advice=result.data.data.advice
  heart.value.help=result.data.data.site
  table.value=true;
}).catch(error=>{
  op.value=false;
  return error;
})
}
</script>
